import { useEffect, useMemo, useState } from 'react'
import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DailyBill'

const Month = () => {
    // 一个月的账单数据，detail是明细，statistical是统计数据：收入、支出、余额
    const [currentMonthList, setMonthList] = useState([])

    // 控制日期选择器的显示
    const [ dateVisible, setDateVisible ] = useState(false)
    const handleDateVisible = visible => {// 在显示和不显示之间切换
        if(visible !== undefined && visible !== null) {
            const _visible = !!visible
            setDateVisible(_visible)
            return
        }
        setDateVisible(!dateVisible)
    }

    // 日期选择器状态
    const formatBillDateMonthly = date => dayjs(date).format('YYYY / MM')
    const [billDate, setBillDate] = useState(() => formatBillDateMonthly(new Date()))

    // 账单数据
    const billList = useSelector(state => state.bill.billList)// 上级组件 Layout.useEffect 获取账单数据并缓存在 redux 中
    const monthGroup = useMemo(() => {// 按月分组的数据
        if(!billList) return []
        return _.groupBy(billList, item => formatBillDateMonthly(item.date))
    },[billList])

    // 统计月度数据
    const monthStatistics = useMemo(() => {
        const ret = {pay: 0, income: 0, balance: 0}
        if(!currentMonthList || currentMonthList.length === 0) return ret
        currentMonthList.forEach(item => {
            if(item.type === 'pay') ret.pay += item.money
            if(item.type === 'income') ret.income += item.money
            ret.balance += item.money
        })
        return ret
    },[currentMonthList])

    /**
     * 1. 隐藏日期选择器
     * 2. 更新账套标题（显示当前是几月份数据）
     * 3. 更新统计数据
     * @param {日期时间类型} date 
     */
    const onConfirmDatePicker = date => {
        handleDateVisible(false)
        const monthKey = formatBillDateMonthly(date)
        setBillDate(monthKey)// 设置当前月份
        setMonthList(monthGroup[monthKey])// 刷新明细数据
    }

    //#region 生命周期钩子
    // 页面渲染后立即填充数据
    // 应该在本组件中使用 useState 管理本组件专用的数据
    // const [currentMonthList, setCurrentMonthList] = useState([])
    // 同时缓存钩子 useMemo 的依赖项使用 currentMonthList
    // 此处通过 setCurrentMonthList 更新本组件数据来触发缓存更新（useMemo自动执行）
    // 来更新本组件显示的数据
    useEffect(() => {
        const monthKey = formatBillDateMonthly(new Date())
        setMonthList(monthGroup[monthKey])
    },[monthGroup])
    //#endregion


    //#region 日组件用到
    const formatBillDateDaily = date => dayjs(date).format('YYYY / MM / DD')
    const dayGroup = useMemo(() => {// 按月分组的数据
        if(!currentMonthList || currentMonthList.length === 0 ) return { keys:[], groupedData:{}}
        // 以日期为key,value=当日的明细对象构成的数组
        const groupedData = _.groupBy(currentMonthList, item => formatBillDateDaily(item.date))
        const keys = Object.keys(groupedData) || []// 日期数组（dayGroupData键构成的数组）
        return { keys, groupedData }
    },[currentMonthList])
    //#endregion

    return (
        <div className='monthlyBill'>
            <NavBar className='nav' backArrow={false}>
                月度收支
            </NavBar>
            <div className='content'>
                <div className='header'>
                    {/* 时间切换区域 */}
                    <div className='date' onClick={handleDateVisible}>
                        <span className='text'>
                            {billDate + ''}月账单
                        </span>
                        {/* 动态样式有两种写法 */}
                        {/* <span className={`arrow ${dateVisible && 'expand'}`} /> */}
                        <span className={classNames('arrow', dateVisible && 'expand')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className='item'>
                            <span className='money'>{monthStatistics.pay}</span>
                            <span className='type'>支出</span>
                        </div>
                        <div className='item'>
                            <span className='money'>{monthStatistics.income}</span>
                            <span className='type'>收入</span>
                        </div>
                        <div className='item'>
                            <span className='money'>{monthStatistics.balance}</span>
                            <span className='type'>结余</span>
                        </div>
                    </div>
                    {/* 时间选择 */}
                    <DatePicker className='kaDate' 
                        title="记账日期" 
                        precision="month" 
                        visible={dateVisible} 
                        max={new Date()}
                        onCancel={() => handleDateVisible(false)}
                        onConfirm={onConfirmDatePicker}
                        onClose={() => handleDateVisible(false)}// 点击蒙层关闭
                        >
                    </DatePicker>
                </div>
                {dayGroup.keys.map(item => <DailyBill inDetails={dayGroup.groupedData[item]} inDate={item}/>)}
            </div>
        </div>
    )
}

export default Month